<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li>西游记：价格{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"></li>
            <li>水浒传：价格{{shzPrice}}，数量： <input type="number" v-model="shzNum"></li>
            <li>总价：{{totalPrice}}</li>
            {{msg}}

            <li v-for="user">
                <!-- 通过管道符，针对某个属性去调用过滤方法进行过滤 -->
            {{user.uid}} - {{user.name | nameAppendNum}} - {{user.gender | genderFilter}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js">
    </script>
    <script type="text/javascript">
        //全局过滤器
        //过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
        Vue.filter('nameAppendNum',function(value){
            return value + "fadf23423";
        });

        let vm = new Vue({
            el: "#app",
            data: {
                xyjPrice: 56.73,
                shzPrice: 47.98,
                xyjNum: 1,
                shzNum: 1,
                msg: "",
                user: { uid:1243424, name: '古力娜扎', gender: 1, age: 25 }

            },
            computed: { 
                //通过对属性的计算，返回需要的业务值
                totalPrice() {
                    return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum; 
                }
            },
            watch: {
                //通过监听某个值的变化，从而做出相应的处理或者返回新值
                xyjNum: function(newVal,oldVal){
                    if (newVal >= 3) {
                        this.msg = "西游记没有更多库存了";
                        this.xyjNum = 3;
                    } else {
                        this.msg = "";
                    }
                }
            },
            filters: {
                // 这种方法定义的过滤器只有在当前vue实例当中才能使用，如果需要定义全局过滤器，需要创建Vue实例之前定义
                genderFilter(gender) { return gender === 1 ? '男~' : '女~' }
            }
        })
    </script>
</body>

</html>